<template>
    <div class="index">
        <div class="header">
            <div class="logo">
                <img :src="logoImg" alt="">
                <div class="logoTitle">
                    <div class="title">障碍赛 计时记分系统</div>
                    <div class="company">盈越体育</div>
                </div>
            </div>
            <div class="matchs">
                <div class="item">
                </div>
                <div class="item flex"> 
                    <el-select @change="refresh"
                        v-model="pageState.matchId" class="m-2" placeholder="Select" style="width: 240px; margin-right:10px"
                    >
                        <el-option
                            v-for="item in dicts.matchs" :key="item.macthId" :label="item.matchName" :value="item.matchId"
                        />
                    </el-select>
                    <el-button type="primary" ><i class="fa fa-refresh btnicon"></i> 刷新</el-button> 
                </div>
            </div>
        </div>
        <div class="main">
            <el-table :data="results" stripe style="width: 100%" height="100%" >
                <el-table-column prop="resultOrder" label="序号" width="70" />
                <el-table-column prop="orgName" label="单位" width="180" />
                <el-table-column prop="athName" label="姓名" width="180" />
                <el-table-column prop="horseBib" label="马号" width="60" />
                <el-table-column prop="horseName" label="马名" width="280" />
                <el-table-column prop="resultStatus" label="状态" width="120" />
                
                <el-table-column fixed="right" label="操作"  >
                    <template #default="scope"> 
                        <el-button @click="showTs(scope.row)" link type="primary" size="small">计时</el-button>
                    </template>
                </el-table-column>
            </el-table>

        </div>
    </div>
</template>

<script>
    
    import { api , TWsClient} from '@/assets/api';
    
    export default {
        mounted(){
            var me = this;
            try {
                me.$nextTick().then(_=>{
                    return me.init();
                }).then(_=>{
                    me.refresh();
                })
            } catch (error) {
                console.log(error)
            }
        },
        data(){
            return{
                pageStateKey:"jumpTs.index.stateKey" ,
                pageState:{
                    matchId:0
                },
                logoImg: require('./imgs/yylogo.jpg'),
                dicts:{ 
                    matchs:[]
                }, 
                results:[]
            }
        },
        methods:{
            init(){
                var me = this;
                return new Promise((su,fa)=>{
                    try {
                        me.pageState = api.getSessionObj(me.pageStateKey , me.pageState);
                        var ps = {};
                        api.query("getMatchs" , ps).then(_res=>{
                            console.log(_res);
                            me.dicts.matchs = _res.recordset.filter( r=>{
                                return r.tsMatchFlag==1;
                            })
                            su();
                        });
                    } catch (error) {
                        console.log(error);
                        su();
                    }
                })
            },
            refresh(){
                var me = this;
                try {
                    api.setSessionObj(me.pageStateKey , me.pageState);
                    var ps = {
                        matchId: me.pageState.matchId
                    };
                    api.query("getResults" , ps).then(_res=>{
                        console.log(_res);
                        me.results = _res.recordset;
                    });
                } catch (error) {
                    console.log(error)
                }
            },
            showTs(resultInfo){
                var me = this;
                try {
                    console.log(resultInfo);
                    var url = "jumpTs?rId="+ resultInfo.resultId;
                    window.open(url,'tsJump')
                } catch (error) {
                    console.log(error)
                }
            },
        }
        
    }
</script>

<style lang="less" scoped>
    .btnicon{
        margin-right: 5px;
    }
    .index{
        height: 100%;
        background-color: #f2f3f9;

        overflow: hidden;
        display: flex;
        flex-direction: column;
        .header{
            display: flex;
            background-color: #fafafa;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            .logo{
                display: flex;
                align-items: center;
                img{
                    height: 40px;
                    line-height: 40px;
                }
                .logoTitle{
                    margin-left: 10px;
                    text-align: left;
                    .title{
                        font-size: 0.85em;
                        font-weight: bold;
                    }
                }
            }
        }
        .main{
            flex: 1;
            padding: 15px;
            overflow: hidden;
            position: relative;

        }
    }
</style>